{"version":3,"file":"static/chunks/pages/categories/edition/[editionId]-b2042f660eedbfbe.js","mappings":"AACA","sources":["webpack://_N_E/?b714","webpack://_N_E/./src/components/Categories/Menu/EditionCategoryBanner.tsx","webpack://_N_E/./src/components/Categories/Menu/EditionCategoryMobileSideSheet.tsx","webpack://_N_E/./src/components/Landing/EditionBookCard.tsx","webpack://_N_E/./src/components/Categories/Menu/EditionCategoryProductListView.tsx","webpack://_N_E/./src/components/Categories/Menu/EditonCategoryList.tsx","webpack://_N_E/./src/hooks/useEditionCategoryTree.ts","webpack://_N_E/./src/api/editionCategory.ts","webpack://_N_E/./src/pages/categories/edition/[editionId].tsx","webpack://_N_E/<anon>"],"sourcesContent":["\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/categories/edition/[editionId]\",\n      function () {\n        return require(\"private-next-pages/categories/edition/[editionId].tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/categories/edition/[editionId]\"])\n      });\n    }\n  ","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { Box, styled, useTheme } from \"@mui/material\";\nimport Link from \"next/link\";\nimport { useMemo } from \"react\";\nexport const EditionCategoryBanner = (param)=>{\n    let { bannerData , editionId  } = param;\n    const theme = useTheme();\n    const mediaQueries = useMemo(()=>({\n            tablet: \"(max-width: \".concat(theme.breakpoints.values.lg, \"px)\"),\n            mobile: \"(max-width: \".concat(theme.breakpoints.values.sm, \"px)\")\n        }), [\n        theme\n    ]);\n    const handleBannerClick = ()=>{\n        mixpanelEvent(\"Edition Category Banner Clicked\", {\n            \"Edition Id\": editionId,\n            \"Banner Url\": bannerData.link\n        });\n    };\n    return /*#__PURE__*/ _jsx(BannerContainer, {\n        children: /*#__PURE__*/ _jsx(Link, {\n            href: bannerData.link,\n            onClick: handleBannerClick,\n            children: /*#__PURE__*/ _jsx(ResponsiveBanner, {\n                children: /*#__PURE__*/ _jsxs(\"picture\", {\n                    children: [\n                        /*#__PURE__*/ _jsx(\"source\", {\n                            media: mediaQueries.mobile,\n                            srcSet: bannerData.imageUrlMobile\n                        }),\n                        /*#__PURE__*/ _jsx(\"source\", {\n                            media: mediaQueries.tablet,\n                            srcSet: bannerData.imageUrlTablet\n                        }),\n                        /*#__PURE__*/ _jsx(\"img\", {\n                            src: bannerData.imageUrlPc,\n                            alt: \"edition-category-banner\"\n                        })\n                    ]\n                })\n            })\n        })\n    });\n};\nconst BannerContainer = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"flex\",\n        padding: \"32px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        backgroundColor: theme.palette.grey[50],\n        [theme.breakpoints.down(\"sm\")]: {\n            padding: \"20px\"\n        }\n    };\n});\nconst ResponsiveBanner = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        maxWidth: \"1200px\",\n        width: \"100%\",\n        aspectRatio: \"auto 1200 / 210\",\n        border: \"1px solid \".concat(theme.palette.opacity.gray900[\"10%\"]),\n        borderRadius: \"12px\",\n        [theme.breakpoints.down(\"lg\")]: {\n            aspectRatio: \"auto 1200 / 220\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            aspectRatio: \"auto 800 / 250\"\n        },\n        overflow: \"hidden\",\n        \"& img\": {\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"cover\"\n        }\n    };\n});\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { MenuColumn } from \"@/components/Category\";\nimport { BoxContainer, BoxTitle, MenuLinkBox, RowContainer } from \"@/components/Category/index.style\";\nimport Icon from \"@/components/icon/Icon\";\nimport AnchorDrawer from \"@/components/modal/AnchorDrawer\";\nimport { MenuListContainer, SideSheetHeader, StepDivider } from \"@/components/SideSheets\";\nimport { ColumnBox } from \"@/components/SideSheets/SideSheetSteps\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { Box, styled, Typography, useTheme } from \"@mui/material\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/router\";\nimport { useState } from \"react\";\nimport { ArrowRight, ArrowRight2px, Sizes } from \"../../icon/IconList\";\nexport const EditionCategoryMobileSideSheet = (param)=>{\n    let { categoryMenuData , categoryId  } = param;\n    const theme = useTheme();\n    const { query: { editionId  }  } = useRouter();\n    const [isOpenMobileSideMenu, setIsOpenMobileSideMenu] = useState(false);\n    const [twoDepthId, setTwoDepthId] = useState(categoryId.slice(0, 4));\n    var _items_find;\n    const findCategoryById = (items, targetId)=>{\n        return !!items.length ? (_items_find = items === null || items === void 0 ? void 0 : items.find((item)=>item.categoryId === targetId)) !== null && _items_find !== void 0 ? _items_find : items[0] : undefined;\n    };\n    const selectTwoDepth = findCategoryById(categoryMenuData === null || categoryMenuData === void 0 ? void 0 : categoryMenuData.depthItems, categoryId.slice(0, 2));\n    const selectThreeDepth = findCategoryById(selectTwoDepth === null || selectTwoDepth === void 0 ? void 0 : selectTwoDepth.items, twoDepthId);\n    const openSideMenu = ()=>{\n        setIsOpenMobileSideMenu(true);\n        mixpanelEvent(\"CTA Button Clicked\", {\n            Position: \"edition category mobile\",\n            \"Button Type\": \"edition category\",\n            \"Button Name\": \"교재별 자료 찾기\",\n            \"Button URL\": \"\"\n        });\n    };\n    const closeSideMenu = ()=>{\n        setIsOpenMobileSideMenu(false);\n    };\n    const categoryMenuMixpanel = (depth, title, url)=>{\n        mixpanelEvent(\"Category Menu Clicked\", {\n            Depth: depth,\n            \"Menu Name\": title,\n            Url: url\n        });\n    };\n    return /*#__PURE__*/ _jsxs(FloatingButtonArea, {\n        children: [\n            /*#__PURE__*/ _jsx(FloatingButton, {\n                label: /*#__PURE__*/ _jsx(Typography, {\n                    sx: {\n                        color: theme.palette.primary.main\n                    },\n                    variant: \"subtitle1\",\n                    children: \"교재별 자료 찾기\"\n                }),\n                size: \"large\",\n                variant: \"filledSecondary\",\n                endIcon: /*#__PURE__*/ _jsx(Icon, {\n                    icon: ArrowRight2px,\n                    size: Sizes.small,\n                    color: theme.palette.primary.main\n                }),\n                onClick: openSideMenu\n            }),\n            /*#__PURE__*/ _jsxs(AnchorDrawer, {\n                anchor: \"right\",\n                open: isOpenMobileSideMenu,\n                onClose: closeSideMenu,\n                children: [\n                    /*#__PURE__*/ _jsx(SideSheetHeader, {\n                        title: \"\".concat(selectTwoDepth === null || selectTwoDepth === void 0 ? void 0 : selectTwoDepth.title) || \"\",\n                        onClose: closeSideMenu\n                    }),\n                    /*#__PURE__*/ _jsx(StepDivider, {}),\n                    /*#__PURE__*/ _jsx(MenuListContainer, {\n                        className: \"depth-two-container\",\n                        children: /*#__PURE__*/ _jsxs(ColumnBox, {\n                            children: [\n                                /*#__PURE__*/ _jsx(MenuLinkBox, {\n                                    className: \"link-box-mobile _depth-two\",\n                                    children: /*#__PURE__*/ _jsx(RowContainer, {\n                                        className: \"container-mobile\",\n                                        children: /*#__PURE__*/ _jsx(BoxContainer, {\n                                            children: selectTwoDepth === null || selectTwoDepth === void 0 ? void 0 : selectTwoDepth.items.map((item)=>/*#__PURE__*/ _jsx(MenuColumn, {\n                                                    data: item,\n                                                    onColumnClick: ()=>{\n                                                        setTwoDepthId(item.categoryId);\n                                                        categoryMenuMixpanel(\"three\", item.title, \"\");\n                                                    },\n                                                    isActive: item.categoryId === selectThreeDepth.categoryId\n                                                }, item.categoryId))\n                                        })\n                                    })\n                                }),\n                                selectThreeDepth && /*#__PURE__*/ _jsxs(MenuLinkBox, {\n                                    children: [\n                                        /*#__PURE__*/ _jsx(Link, {\n                                            href: \"/categories/edition/\".concat(editionId, \"?id=\").concat(selectThreeDepth.categoryId),\n                                            onClick: closeSideMenu,\n                                            children: /*#__PURE__*/ _jsx(BoxTitle, {\n                                                children: /*#__PURE__*/ _jsxs(Box, {\n                                                    sx: {\n                                                        display: \"flex\",\n                                                        alignItems: \"center\",\n                                                        gap: \"4px\"\n                                                    },\n                                                    children: [\n                                                        selectThreeDepth.title || \"\",\n                                                        /*#__PURE__*/ _jsx(Icon, {\n                                                            icon: ArrowRight,\n                                                            size: Sizes.small\n                                                        })\n                                                    ]\n                                                })\n                                            })\n                                        }),\n                                        /*#__PURE__*/ _jsx(RowContainer, {\n                                            className: \"depth-two-row-container\",\n                                            children: /*#__PURE__*/ _jsx(BoxContainer, {\n                                                children: selectThreeDepth.items.map((menu)=>/*#__PURE__*/ _jsx(Link, {\n                                                        href: \"/categories/edition/\".concat(editionId, \"?id=\").concat(menu.categoryId),\n                                                        onClick: closeSideMenu,\n                                                        children: /*#__PURE__*/ _jsx(MenuColumn, {\n                                                            data: menu,\n                                                            onColumnClick: ()=>{\n                                                                categoryMenuMixpanel(\"four\", menu.title, \"/categories/edition/\".concat(editionId, \"?id=\").concat(menu.categoryId));\n                                                            },\n                                                            isActive: false,\n                                                            suffix: true\n                                                        }, menu.categoryId)\n                                                    }, menu.categoryId))\n                                            })\n                                        })\n                                    ]\n                                })\n                            ]\n                        })\n                    })\n                ]\n            })\n        ]\n    });\n};\nconst FloatingButtonArea = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        position: \"fixed\",\n        width: \"100%\",\n        bottom: 0,\n        padding: theme.spacing(2, 2.5),\n        borderTop: \"1px solid \".concat(theme.palette.grey[50]),\n        backgroundColor: theme.palette.blackAndWhite.white,\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        [theme.breakpoints.up(\"sm\")]: {\n            display: \"none\"\n        }\n    };\n});\nconst FloatingButton = styled(Button)((param)=>{\n    let { theme  } = param;\n    return {\n        width: \"100%\",\n        padding: theme.spacing(1.5, 2.5)\n    };\n});\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: \",\n        \";\\n  position: relative;\\n  //height: 100%;\\n  gap: 16px;\\n  cursor: pointer;\\n\\n  .book-tag-wrapper {\\n    display: flex;\\n    gap: 4px;\\n  }\\n\\n  .thumb-container {\\n    position: relative;\\n  }\\n\\n  .thumb-wrapper {\\n    position: relative;\\n    width: 136px;\\n    height: 136px;\\n    background-color: \",\n        \";\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    border-radius: 6px;\\n\\n    :hover {\\n      transition: all 0.3s ease-in-out;\\n      background-color: \",\n        \";\\n    }\\n\\n    img {\\n      box-shadow: 3px 3px 12px 0px rgba(28, 31, 46, 0.06);\\n      border-radius: 2px;\\n      //width: 92px;\\n    }\\n\\n    .index-label {\\n      position: absolute;\\n      left: 0;\\n      top: 0;\\n      background-color: rgba(169, 175, 199, 0.2);\\n      color: \",\n        \";\\n      text-align: center;\\n      font-size: 18px;\\n      font-weight: 900;\\n      width: 26px;\\n      height: 26px;\\n      border-radius: 6px 0;\\n    }\\n  }\\n\\n  .preview-btn {\\n    position: absolute;\\n    bottom: 0;\\n    border-radius: 4px;\\n    border: 1px solid \",\n        \";\\n    background-color: #fff;\\n    color: var(--Gray-gray_500, #6a708a);\\n    font-size: 14px;\\n    font-weight: 600;\\n    line-height: 22px;\\n    /* width: 110px; */\\n    text-align: center;\\n    padding: 4px 12px;\\n    cursor: pointer;\\n\\n    :hover {\\n      transition: all 0.3s ease-in-out;\\n      background-color: \",\n        \";\\n    }\\n  }\\n\\n  .contents-wrapper {\\n    flex: 1;\\n    align-items: flex-start;\\n    display: flex;\\n    flex-direction: column;\\n    /* 일단 아래 스타일 추가를 한 이유는, 높이값을 맞추기 위해서 입니다. 추가로 스타일 수정이 필요해 보여요. */\\n    justify-content: space-around;\\n\\n    p {\\n      line-height: 1.5;\\n      text-align: left;\\n    }\\n\\n    .title {\\n      margin-top: 8px;\\n      -webkit-line-clamp: 2;\\n      white-space: normal;\\n      overflow: hidden;\\n      text-overflow: ellipsis;\\n      display: -webkit-box;\\n      -webkit-box-orient: vertical;\\n      color: \",\n        \";\\n    }\\n\\n    .author {\\n      margin-top: 4px;\\n      color: \",\n        \";\\n      font-size: 14px;\\n\\n      &.non-clickable {\\n        pointer-events: none;\\n      }\\n\\n      :hover:not(.non-clickable) {\\n        text-decoration: underline;\\n      }\\n    }\\n\\n    .price {\\n      color: \",\n        \";\\n      font-size: 20px;\\n      font-weight: 700;\\n      line-height: 26px;\\n      margin-top: 16px;\\n      display: flex;\\n      align-items: center;\\n    }\\n  }\\n\\n  @media (max-width: 768px) {\\n    .book-tag-wrapper {\\n      gap: 5px;\\n    }\\n\\n    .thumb-wrapper {\\n      width: 108px;\\n      height: 108px;\\n      border-radius: 4px;\\n\\n      img {\\n        width: 56px;\\n      }\\n\\n      .index-label {\\n        font-size: 12px;\\n        width: 18px;\\n        height: 18px;\\n        line-height: 1.5;\\n      }\\n    }\\n\\n    .contents-wrapper {\\n      .title {\\n        font-size: 14px;\\n      }\\n\\n      .author {\\n        font-size: 14px;\\n        line-height: 22px;\\n      }\\n\\n      .price {\\n        font-size: 16px;\\n        margin-top: 8px;\\n\\n        > span {\\n        }\\n      }\\n    }\\n\\n    .preview-btn {\\n      display: none;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  background-color: \",\n        \";\\n  color: \",\n        \";\\n  font-weight: 400;\\n  padding: 2px 8px;\\n  border-radius: 4px;\\n  line-height: 22px;\\n  font-size: 14px;\\n  @media (max-width: 768px) {\\n    font-size: 12px;\\n    line-height: 22px;\\n    padding: 2px 6px;\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  margin-left: 8px;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  top: 8px;\\n  left: 8px;\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useRouter } from \"next/router\";\nimport { useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport { CouponTag, OnlySolvookTag } from \"@/components/Tags\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { DEFAULT_BOOK_COVER } from \"@/settings/constant\";\nimport Image from \"next/image\";\nimport { Subjects } from \"../../api/product\";\nimport { useMainPageStore } from \"../../store/main\";\nimport RatingWithText from \"../common/RatingWithText\";\nimport { usePreviewDialogStore } from \"../Search/PreviewDialogProvider\";\n//과목이 사회 과학인 경우 단원태그를 보여주지 않음\nconst HIDDEN_UNIT = [\n    Subjects.SC,\n    Subjects.SO\n];\nexport const EditonBookCard = (param)=>{\n    let { book , index , positionType , onClick , mixpanelPosition =\"쏠북메인\"  } = param;\n    const { openPreviewDialog  } = usePreviewDialogStore();\n    const router = useRouter();\n    const subject = (book === null || book === void 0 ? void 0 : book.subject) || useMainPageStore((state)=>state.subject);\n    //과목이 수학일 경우 단원태그만 보여줌\n    const isMath = useMemo(()=>subject === \"MA\", [\n        subject\n    ]);\n    const onClickPreviewBtn = async (e)=>{\n        openPreviewDialog({\n            id: book.id.toString()\n        });\n        mixpanelEvent(\"Preview Button Clicked\", {\n            bookId: book.id,\n            bookTitle: book.title,\n            Proposition: mixpanelPosition\n        });\n    };\n    const goToProductDetail = (id)=>{\n        router.push(\"/products/\".concat(id));\n        onClick && onClick();\n    };\n    var _book_imageUrl;\n    return /*#__PURE__*/ _jsxs(BookInfoWrapper, {\n        positiontype: positionType,\n        className: \"book-info-wrapper\",\n        children: [\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"thumb-container\",\n                children: [\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"thumb-wrapper\",\n                        onClick: ()=>goToProductDetail(book.id),\n                        children: [\n                            positionType === \"selectedBook\" && /*#__PURE__*/ _jsx(\"span\", {\n                                className: \"index-label\",\n                                children: index + 1\n                            }),\n                            /*#__PURE__*/ _jsx(Image, {\n                                src: (_book_imageUrl = book.imageUrl) !== null && _book_imageUrl !== void 0 ? _book_imageUrl : DEFAULT_BOOK_COVER,\n                                width: 100,\n                                height: 100,\n                                alt: \"selected-book-image\"\n                            }),\n                            book.badgeText && /*#__PURE__*/ _jsx(OnlySolvookPassTag, {\n                                children: book.badgeText\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsx(\"div\", {\n                        className: \"preview-btn\",\n                        onClick: ()=>onClickPreviewBtn(book.id),\n                        children: \"샘플 보기\"\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsxs(\"div\", {\n                className: \"contents-wrapper\",\n                onClick: ()=>goToProductDetail(book.id),\n                children: [\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"book-tag-wrapper\",\n                        children: [\n                            !HIDDEN_UNIT.includes(subject) && book.unit && /*#__PURE__*/ _jsx(BookTag, {\n                                tagType: \"primary\",\n                                children: book.unit\n                            }),\n                            !isMath && book.category.tag && /*#__PURE__*/ _jsx(BookTag, {\n                                tagType: \"default\",\n                                children: book.category.tag\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"title\",\n                        children: book.title\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"author \".concat(!book.brandName && \"non-clickable\"),\n                        onClick: (e)=>{\n                            e.stopPropagation();\n                            router.push(\"/@\".concat(book.brandName));\n                        },\n                        children: book.author\n                    }),\n                    /*#__PURE__*/ _jsx(\"p\", {\n                        className: \"price\",\n                        children: typeof book.price === \"string\" ? book.price : \"\".concat(book.price.toLocaleString() || 0, \"원\")\n                    }),\n                    book.rating && book.rating >= 3 && /*#__PURE__*/ _jsx(RatingWithText, {\n                        rating: book.rating\n                    })\n                ]\n            })\n        ]\n    });\n};\nconst BookInfoWrapper = styled.div.withConfig({\n    componentId: \"sc-9dd93e54-0\"\n})(_templateObject(), (props)=>props.positiontype === \"selectedBook\" ? \"row\" : \"column\", (props)=>props.theme.new.colors.sol_gray_0, (props)=>props.theme.new.colors.sol_gray_50, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_200, (props)=>props.theme.new.colors.sol_gray_50, (props)=>props.theme.new.colors.sol_gray_700, (props)=>props.theme.new.colors.sol_gray_500, (props)=>props.theme.new.colors.sol_gray_800);\nconst BookTag = styled.div.withConfig({\n    componentId: \"sc-9dd93e54-1\"\n})(_templateObject1(), (props)=>props.tagType === \"primary\" ? props.theme.new.colors.sol_indigo_0 : props.theme.new.colors.sol_gray_0, (props)=>props.tagType === \"primary\" ? props.theme.new.colors.sol_indigo_500 : props.theme.new.colors.sol_gray_500);\nconst BookCardCouponTag = styled(CouponTag).withConfig({\n    componentId: \"sc-9dd93e54-2\"\n})(_templateObject2());\nconst OnlySolvookPassTag = styled(OnlySolvookTag).withConfig({\n    componentId: \"sc-9dd93e54-3\"\n})(_templateObject3());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: grid;\\n  grid-template-columns: 1fr 1fr 1fr 1fr;\\n  gap: 20px;\\n  width: 100%;\\n  flex-wrap: wrap;\\n  @media (max-width: 1080px) {\\n    grid-template-columns: 1fr 1fr 1fr;\\n  }\\n  @media (max-width: 920px) {\\n    grid-template-columns: 1fr 1fr 1fr;\\n  }\\n  @media (max-width: 768px) {\\n    grid-template-columns: 1fr 1fr;\\n    gap: 12px;\\n  }\\n\\n  .book-info-wrapper {\\n    min-width: 180px;\\n    width: 100%;\\n    flex: 1 1 0;\\n    flex-direction: column;\\n    gap: 8px;\\n\\n    img {\\n      width: 92px;\\n    }\\n\\n    .thumb-wrapper {\\n      display: flex;\\n      box-sizing: border-box;\\n      flex-direction: column;\\n      width: 100%;\\n      padding: 8px;\\n      height: 224px;\\n      padding-bottom: 40px;\\n    }\\n\\n    > div {\\n      position: relative;\\n    }\\n\\n    .preview-btn {\\n      bottom: 8px;\\n      left: 8px;\\n      right: 8px;\\n      width: auto;\\n      text-align: center;\\n    }\\n  }\\n\\n  @media (max-width: 768px) {\\n    .book-info-wrapper {\\n      //width:100% ;\\n      min-width: 173px;\\n\\n      .thumb-wrapper {\\n        height: 150px;\\n        padding-bottom: 8px;\\n\\n        img {\\n          width: 68px;\\n        }\\n      }\\n    }\\n\\n    .preview-btn {\\n      display: none;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { CategoryListPageSkeletonItem } from \"@/components/Categories/Menu/CategoryListPageSkeleton\";\nimport { EmptyWrapper } from \"@/components/Coupons/Mypage/EmptyWrapper\";\nimport { EditonBookCard } from \"@/components/Landing/EditionBookCard\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { styled } from \"@mui/material\";\nexport const EditionCategoryProductListView = (param)=>{\n    let { isLoadingListItem , items , limit  } = param;\n    const { isLoggedIn  } = useAuthStore();\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(GridContainer, {\n                children: isLoadingListItem ? Array.from({\n                    length: limit\n                }).map((item, idx)=>{\n                    return /*#__PURE__*/ _jsx(CategoryListPageSkeletonItem, {}, idx);\n                }) : items.map((product, idx)=>{\n                    return /*#__PURE__*/ _jsx(EditonBookCard, {\n                        book: product,\n                        index: idx,\n                        positionType: \"curation\",\n                        mixpanelPosition: \"카테고리\",\n                        onClick: ()=>{\n                            //mx-48\n                            mixpanelEvent(\"Category Product Clicked\", {\n                                subject: product.subject,\n                                productId: product.id,\n                                productTitle: product.title,\n                                productType: \"handout\",\n                                isLoggedIn,\n                                price: product.price,\n                                authorName: product.author,\n                                \"Coupon Badge\": product === null || product === void 0 ? void 0 : product.isCouponAvailable,\n                                \"Review Badge\": (product === null || product === void 0 ? void 0 : product.rating) >= 3\n                            });\n                        }\n                    }, idx);\n                })\n            }),\n            !isLoadingListItem && items.length === 0 && /*#__PURE__*/ _jsx(EmptyWrapper, {\n                description: \"해당하는 상품이 없어요.\"\n            })\n        ]\n    });\n};\nconst GridContainer = styled(\"div\")(_templateObject());\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  align-items: center;\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  margin-top: 32px;\\n  ul {\\n    display: flex;\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { CategoryFilterSectionView } from \"@/components/Categories/Menu/CategoryFilterSectionView\";\nimport { useCategoryFilterHandler } from \"@/hooks/useCategoryFilterHandler\";\nimport { useMobileFilterSideSheet } from \"@/hooks/useMobileFilterSideSheet\";\nimport theme from \"@/themes/uiLibraryTheme\";\nimport { Pagination } from \"@bookips/solvook-ui-library\";\nimport { styled, Typography } from \"@mui/material\";\nimport { useMemo } from \"react\";\nimport { PreviewDialogProvider } from \"../../Search/PreviewDialogProvider\";\nimport { EditionCategoryProductListView } from \"./EditionCategoryProductListView\";\nexport const EditionCategoryList = (param)=>{\n    let { items =[] , totalCount =0 , filterItems =[] , sortItems =[] , isLoadingListItem , categoryName , limit , currentPage , totalPage , onChangePage  } = param;\n    const { palette  } = theme;\n    const { selectedFilterList , selectedSort , filterQueryHandler , isCheckFilterItem , isCheckFilterCount  } = useCategoryFilterHandler();\n    const hasFilterItems = useMemo(()=>{\n        return filterItems.some((filter)=>filter.items.length > 0);\n    }, [\n        filterItems\n    ]);\n    const { mobileFilterSideSheet , handleMobileSideSheet  } = useMobileFilterSideSheet();\n    return /*#__PURE__*/ _jsx(PreviewDialogProvider, {\n        children: /*#__PURE__*/ _jsxs(CategoryListViewContainer, {\n            children: [\n                /*#__PURE__*/ _jsx(Typography, {\n                    component: \"h5\",\n                    typography: \"h5\",\n                    color: palette.text[\"title\"],\n                    style: {\n                        textAlign: \"left\",\n                        width: \"100%\"\n                    },\n                    children: categoryName\n                }),\n                /*#__PURE__*/ _jsx(CategoryFilterSectionView, {\n                    filterItems: filterItems,\n                    hasFilterItems: hasFilterItems,\n                    handleMobileSlider: handleMobileSideSheet,\n                    selectedFilterList: selectedFilterList,\n                    filterQueryHandler: filterQueryHandler,\n                    totalCount: totalCount,\n                    sortItems: sortItems,\n                    selectedSort: selectedSort,\n                    isCheckFilterItem: isCheckFilterItem,\n                    isCheckFilterCount: isCheckFilterCount,\n                    mobileFilterSideSheet: mobileFilterSideSheet\n                }),\n                /*#__PURE__*/ _jsx(EditionCategoryProductListView, {\n                    isLoadingListItem: isLoadingListItem,\n                    items: items,\n                    limit: limit\n                }),\n                /*#__PURE__*/ _jsx(PaginationContainer, {\n                    children: /*#__PURE__*/ _jsx(Pagination, {\n                        page: currentPage,\n                        onChange: (_, page)=>onChangePage(page),\n                        count: totalPage,\n                        size: \"medium\"\n                    })\n                })\n            ]\n        })\n    });\n};\nconst CategoryListViewContainer = styled(\"div\")(_templateObject());\nconst PaginationContainer = styled(\"div\")(_templateObject1());\n","import { useCallback, useMemo } from \"react\";\nexport const useEditionCategoryTree = (param)=>{\n    let { editionCategoryMenuData , categoryId  } = param;\n    const currentDepth = useMemo(()=>{\n        if (!categoryId) return 1;\n        return categoryId.length / 2;\n    }, [\n        categoryId\n    ]);\n    const convertCategoryToTreeData = useCallback((category)=>{\n        if (!category) return [];\n        const convertItems = (items)=>{\n            return items.map((item)=>{\n                return {\n                    id: item.categoryId,\n                    label: item.title,\n                    children: item.items ? convertItems(item.items) : []\n                };\n            });\n        };\n        return convertItems(category.items);\n    }, []);\n    const findCategoryChildren = useCallback((depth, id)=>{\n        if (!editionCategoryMenuData) return null;\n        const currentId = id || categoryId;\n        let currentItems = editionCategoryMenuData.depthItems;\n        let currentIdSlice = \"\";\n        for(let i = 1; i <= depth; i++){\n            currentIdSlice = currentId.slice(0, i * 2).toString();\n            const currentCategory = currentItems.find((item)=>item.categoryId === currentIdSlice);\n            if (!currentCategory) return null;\n            if (i === depth) return currentCategory;\n            currentItems = currentCategory.items;\n        }\n        return null;\n    }, [\n        categoryId,\n        editionCategoryMenuData\n    ]);\n    const findCategoryDepthNameWithIds = useCallback(()=>{\n        if (!editionCategoryMenuData) return [];\n        if (!categoryId) return [\n            {\n                name: findCategoryChildren(1).title,\n                id: findCategoryChildren(1).categoryId\n            }\n        ];\n        const findCategory = function(items) {\n            let depthNames = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];\n            for(let i = 0; i < items.length; i++){\n                if (items[i].categoryId === categoryId) return [\n                    ...depthNames,\n                    {\n                        name: items[i].title,\n                        id: items[i].categoryId\n                    }\n                ];\n                if (items[i].items) {\n                    const found = findCategory(items[i].items, [\n                        ...depthNames,\n                        {\n                            name: items[i].title,\n                            id: items[i].categoryId\n                        }\n                    ]);\n                    if (found) return found;\n                }\n            }\n        };\n        return findCategory(editionCategoryMenuData.depthItems) || [];\n    }, [\n        editionCategoryMenuData,\n        categoryId\n    ]);\n    const isLastDepth = useMemo(()=>{\n        var _findCategoryChildren, _findCategoryChildren1;\n        return ((_findCategoryChildren = findCategoryChildren(currentDepth)) === null || _findCategoryChildren === void 0 ? void 0 : _findCategoryChildren.items) ? ((_findCategoryChildren1 = findCategoryChildren(currentDepth)) === null || _findCategoryChildren1 === void 0 ? void 0 : _findCategoryChildren1.items.length) === 0 : true;\n    }, [\n        categoryId,\n        editionCategoryMenuData\n    ]);\n    const checkLastDepth = useCallback((id)=>{\n        var _findCategoryChildren, _findCategoryChildren1;\n        return ((_findCategoryChildren = findCategoryChildren(id.length / 2, id)) === null || _findCategoryChildren === void 0 ? void 0 : _findCategoryChildren.items) ? ((_findCategoryChildren1 = findCategoryChildren(id.length / 2, id)) === null || _findCategoryChildren1 === void 0 ? void 0 : _findCategoryChildren1.items.length) === 0 : true;\n    }, [\n        editionCategoryMenuData,\n        categoryId\n    ]);\n    const treeData = useMemo(()=>convertCategoryToTreeData(findCategoryChildren(1)), [\n        editionCategoryMenuData,\n        categoryId\n    ]);\n    return {\n        treeData,\n        findCategoryChildren,\n        categoryDepthNameList: findCategoryDepthNameWithIds(),\n        currentDepth,\n        isLastDepth,\n        checkLastDepth\n    };\n};\n","import { otherApiClient } from \".\";\nexport const getEditionCategoryList = async (param)=>{\n    let { editionId  } = param;\n    const { data  } = await otherApiClient.market(\"/edition-categories/\".concat(editionId));\n    return data;\n};\nexport const getEditionCategoryProduct = async (param)=>{\n    let { editionId , categoryId , ...rest } = param;\n    const { data  } = await otherApiClient.market(\"/edition-categories/\".concat(editionId, \"/\").concat(categoryId), {\n        params: rest\n    });\n    return data;\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  gap: 24px;\\n  margin-bottom: 64px;\\n\\n  body:has(&) {\\n    .gnb {\\n      position: unset;\\n    }\\n\\n    .fixed {\\n      position: unset;\\n      top: unset;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 204px;\\n  height: calc(100vh - 12px);\\n  padding: 32px 16px 0 0;\\n  position: sticky;\\n  top: 0;\\n  transition: top 0.3s ease;\\n  overflow-y: auto;\\n\\n  &::-webkit-scrollbar {\\n    width: 3px;\\n    height: 140px;\\n  }\\n\\n  &::-webkit-scrollbar-thumb {\\n    border-radius: 2px;\\n    background: rgba(206, 210, 224, 1);\\n  }\\n\\n  @media (max-width: 768px) {\\n    display: none;\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  gap: 32px;\\n  width: calc(100% - 204px);\\n  flex: 1;\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { Container } from \"@/components\";\nimport { BreadCrumbItem, CategoryBreadCrumbView } from \"@/components/Categories/Menu/CategoryBreadCrumbView\";\nimport { CategoryTreeView, ChevronDown, ChevronUp } from \"@/components/Categories/Menu/CategoryTree\";\nimport { CategoryTreeItem } from \"@/components/Categories/Menu/CategoryTreeItem\";\nimport { EditionCategoryBanner } from \"@/components/Categories/Menu/EditionCategoryBanner\";\nimport { EditionCategoryMobileSideSheet } from \"@/components/Categories/Menu/EditionCategoryMobileSideSheet\";\nimport { EditionCategoryList } from \"@/components/Categories/Menu/EditonCategoryList\";\nimport { FilterQueryHandlerType, useCategoryFilterHandler } from \"@/hooks/useCategoryFilterHandler\";\nimport { useEditionCategoryTree } from \"@/hooks/useEditionCategoryTree\";\nimport { useHandleTreeView } from \"@/hooks/useHandleTreeView\";\nimport { usePagination } from \"@/hooks/usePaginationNew\";\nimport { styled, Typography } from \"@mui/material\";\nimport { useTreeViewApiRef } from \"@mui/x-tree-view\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/router\";\nimport { getAdBanner } from \"src/api/adBanner\";\nimport { CategoryQueryKey, DetailFilterKeys } from \"src/api/category\";\nimport { getEditionCategoryList, getEditionCategoryProduct } from \"src/api/editionCategory\";\nconst LIMIT = 24;\nconst EditionCategoryPage = ()=>{\n    var _editionCategoryMenuData_depthItems__items_, _editionCategoryMenuData_depthItems_, _findCategoryChildren, _categoryDepthNameList_;\n    const { query: { editionId , id  }  } = useRouter();\n    const { searchParams , filterQueryHandler  } = useCategoryFilterHandler();\n    const { data: bannerData  } = useQuery([\n        \"adBanner\",\n        \"editionCategory\"\n    ], ()=>getAdBanner({\n            position: \"editionCategory\",\n            pageId: editionId\n        }));\n    const { data: editionCategoryMenuData  } = useQuery([\n        \"edition-categories/\".concat(editionId)\n    ], ()=>getEditionCategoryList({\n            editionId: editionId\n        }));\n    const categoryId = id !== null && id !== void 0 ? id : (_editionCategoryMenuData_depthItems__items_ = (_editionCategoryMenuData_depthItems_ = editionCategoryMenuData === null || editionCategoryMenuData === void 0 ? void 0 : editionCategoryMenuData.depthItems[0]) === null || _editionCategoryMenuData_depthItems_ === void 0 ? void 0 : _editionCategoryMenuData_depthItems_.items[0]) === null || _editionCategoryMenuData_depthItems__items_ === void 0 ? void 0 : _editionCategoryMenuData_depthItems__items_.categoryId;\n    const { data: productData , isLoading  } = useQuery([\n        \"edition-categories/\".concat(editionId, \"/\").concat(categoryId),\n        searchParams.toString()\n    ], ()=>getEditionCategoryProduct({\n            editionId: editionId,\n            categoryId: categoryId,\n            sort: searchParams.get(CategoryQueryKey.SORT),\n            \"authors[]\": searchParams.getAll(DetailFilterKeys.AUTHORS),\n            \"dataTypes[]\": searchParams.getAll(DetailFilterKeys.DATATYPES),\n            \"units[]\": searchParams.getAll(DetailFilterKeys.UNITS),\n            limit: LIMIT,\n            offset\n        }), {\n        enabled: !!categoryId,\n        keepPreviousData: true\n    });\n    var _productData_totalCount;\n    const { offset , ...paginationProps } = usePagination({\n        limit: LIMIT,\n        totalCount: (_productData_totalCount = productData === null || productData === void 0 ? void 0 : productData.totalCount) !== null && _productData_totalCount !== void 0 ? _productData_totalCount : 0,\n        isUseAsPath: true\n    });\n    const { treeData , categoryDepthNameList , currentDepth , findCategoryChildren , isLastDepth  } = useEditionCategoryTree({\n        editionCategoryMenuData,\n        categoryId: categoryId\n    });\n    const apiRef = useTreeViewApiRef();\n    const { expandedItems , handleSelectedItemsChange , handleExpandedItemsChange , selectedItem  } = useHandleTreeView({\n        categoryId: categoryId,\n        categoryMenu: editionCategoryMenuData === null || editionCategoryMenuData === void 0 ? void 0 : editionCategoryMenuData.depthItems\n    });\n    const handleBreadCrumbs = (id)=>{\n        filterQueryHandler({\n            filterType: FilterQueryHandlerType.CATEGORY,\n            value: id\n        });\n    };\n    const breadcrumbList = categoryDepthNameList.map((item, idx)=>{\n        if (idx === 0) return;\n        return /*#__PURE__*/ _jsx(BreadCrumbItem, {\n            depth: idx,\n            onClick: ()=>handleBreadCrumbs(item.id),\n            item: item,\n            list: categoryDepthNameList\n        }, item.id);\n    });\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            bannerData && bannerData.items.length !== 0 && /*#__PURE__*/ _jsx(EditionCategoryBanner, {\n                bannerData: bannerData.items[0],\n                editionId: categoryId\n            }),\n            /*#__PURE__*/ _jsxs(CategoryNextPageContainer, {\n                children: [\n                    /*#__PURE__*/ _jsxs(CategoryLNBSection, {\n                        children: [\n                            editionCategoryMenuData && /*#__PURE__*/ _jsx(Typography, {\n                                variant: \"subtitle1\",\n                                sx: {\n                                    marginBottom: \"16px\"\n                                },\n                                children: (_findCategoryChildren = findCategoryChildren(1)) === null || _findCategoryChildren === void 0 ? void 0 : _findCategoryChildren.title\n                            }),\n                            /*#__PURE__*/ _jsx(CategoryTreeView, {\n                                apiRef: apiRef,\n                                slots: {\n                                    item: CategoryTreeItem,\n                                    expandIcon: ChevronUp,\n                                    collapseIcon: ChevronDown\n                                },\n                                items: treeData,\n                                expandedItems: expandedItems,\n                                selectedItems: selectedItem,\n                                onSelectedItemsChange: handleSelectedItemsChange,\n                                onExpandedItemsChange: handleExpandedItemsChange\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(CategoryContentsSection, {\n                        children: [\n                            /*#__PURE__*/ _jsx(CategoryBreadCrumbView, {\n                                breadcrumbList: breadcrumbList,\n                                currentDepth: currentDepth,\n                                findCategoryChildren: findCategoryChildren,\n                                handleCategoryMenu: handleBreadCrumbs,\n                                isLastDepth: isLastDepth\n                            }),\n                            editionCategoryMenuData && /*#__PURE__*/ _jsx(EditionCategoryList, {\n                                ...productData,\n                                ...paginationProps,\n                                limit: LIMIT,\n                                isLoadingListItem: isLoading,\n                                categoryName: (_categoryDepthNameList_ = categoryDepthNameList[categoryDepthNameList.length - 1]) === null || _categoryDepthNameList_ === void 0 ? void 0 : _categoryDepthNameList_.name\n                            })\n                        ]\n                    })\n                ]\n            }),\n            editionCategoryMenuData && categoryId && /*#__PURE__*/ _jsx(EditionCategoryMobileSideSheet, {\n                categoryMenuData: editionCategoryMenuData,\n                categoryId: categoryId\n            })\n        ]\n    });\n};\nexport default EditionCategoryPage;\nconst CategoryNextPageContainer = styled(Container)(_templateObject());\nconst CategoryLNBSection = styled(\"section\")(_templateObject1());\nconst CategoryContentsSection = styled(\"section\")(_templateObject2());\n"],"names":[],"sourceRoot":""}